<template>
  <div class="image-select">
    <h4>Select Avatar</h4>
    <div class="wrapper">
      <div v-for="(image, idx) in imageList" :key="image" class="wrapper__item">
        <Badge :text="index == idx ? 'Y' : ''">
          <a class="wrapper__item__a" @click="imgClicked(idx)"
            ><img :src="image" :class="{ selected: index == idx }"
          /></a>
        </Badge>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from '@/plugins/class-component-hooks'
import { Model, Emit } from 'vue-property-decorator'

@Component
export default class ImageSelect extends Vue {
  @Prop()
  private readonly imageList!: string[]

  private index = 0

  // @Model('img-clicked', { type: Number, default: 0 }) readonly index!: number

  @Emit('img-clicked')
  imgClicked(idx: number) {
    this.index = idx
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/styles/general.scss';
.image-select {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #dcdee2;
  padding: 0.6rem 1rem;
  text-align: center;

  @media screen and (max-width: $size-sm) {
    overflow: scroll;
  }

  & > :first-child {
    margin-bottom: 0.5rem;
  }

  .wrapper {
    margin: 0 auto;
    display: flex;
    &__item {
      width: 64px;
      height: 64px;
      margin-right: 0.5rem;

      &__a {
        width: 100%;

        & > img {
          width: 100%;
          border-radius: 50%;
          filter: brightness(90%);
          transition: all 1s ease;

          &:hover {
            filter: brightness(120%);
          }

          &.selected {
            filter: brightness(120%);
          }

          &.img-selected {
            border-radius: 1px solid red;
          }
        }
      }
    }
  }
}
</style>
